<template>
  <div id="app">
    <div id="pag-wrap">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
    <div id="menu" @touchmove.prevent>
      <div class="m-ico user-ico" :class="{choose: tabIndex==1}" @click="chooseTab(1)">
        <img :src="userIcoChoose" alt="">
        <img :src="userIco" alt="">
        用户数据
      </div>
      <div class="m-ico in-out-ico" :class="{choose: tabIndex==2}" @click="chooseTab(2)">
        <img :src="inOutChoose" alt="">
        <img :src="inOutIco" alt="">
        充提数据
      </div>
      <div class="m-ico pledge-ico" :class="{choose: tabIndex==3}" @click="chooseTab(3)">
        <img :src="pledgeChoose" alt="">
        <img :src="pledgeIco" alt="">
        质押数据
      </div>
      <div class="m-ico node-ico" :class="{choose: tabIndex==4}" @click="chooseTab(4)">
        <img :src="nodeChoose" alt="">
        <img :src="nodeIco" alt="">
        节点详情
      </div>
      <div class="m-ico rank-ico" :class="{choose: tabIndex==5}" @click="chooseTab(5)">
        <img :src="rankChoose" alt="">
        <img :src="rankIco" alt="">
        持币排行榜
      </div>
    </div>
  </div>
</template>

<script>
  import {getHashString} from 'common/js/utl'

    export default {
        data() {
            return {
                tabIndex: 1,
                userIco: require('assets/images/menu/user.png'),
                userIcoChoose: require('assets/images/menu/user-highlight.png'),
                inOutIco: require('assets/images/menu/in-out.png'),
                inOutChoose: require('assets/images/menu/in-out-highlight.png'),
                pledgeIco: require('assets/images/menu/pledge.png'),
                pledgeChoose: require('assets/images/menu/pledge-highlight.png'),
                rankIco: require('assets/images/menu/rank.png'),
                rankChoose: require('assets/images/menu/rank-highlight.png'),
                nodeIco: require('assets/images/menu/node.png'),
                nodeChoose: require('assets/images/menu/node-highlight.png'),
            }
        },
        created(){
            let index = getHashString('index')
            if(index){
                this.tabIndex = +index
            }
        },
        methods: {
            chooseTab(index){
                this.tabIndex = index
                let url
                switch (index) {
                    case 1:
                        url = '/'
                        break;
                    case 2:
                        url = '/cvnt'
                        break;
                    case 3:
                        url = '/pledge'
                        break;
                    case 4:
                        url = '/node'
                        break;
                    case 5:
                        url = '/rank'
                        break;
                }
                this.$router.replace({path: url, query: {index}});
            }
        }
    }
</script>

<style lang="scss">
@import 'common/scss/index.scss';
@import "~common/scss/mixin";

#app {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

 #pag-wrap {
   height: calc(100% - 98px);
   background: #F5F5FB;
   overflow-y: auto;
 }

  #menu {
    height:98px;
    background:rgba(255,255,255,1);
    box-shadow:0px -1px 8px 0px rgba(10,29,87,0.2);
    display: flex;
    padding: 0 50px;
    align-items: center;
    justify-content: space-between;
    font-size:20px;
    font-weight:600;
    color:#DADDEA;
  }


  .m-ico {
    text-align: center;
    position: relative;
    &.choose {
      color: #173E8F;
      img {
        &:first-of-type {
          display: block;
        }
        &:last-of-type {
          display: none;
        }
      }
    }
    img {
      display: none;
      width: 46px;
      height: 46px;
      margin: 0 auto 9px auto;
      &:last-of-type {
        display: block;
      }
    }
  }


  div[xdw], p[xdw] {
    &:before{
      content: attr(xdw);
    }
  }




</style>
